<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单身圈</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!--公共js-->
    <script src="../js/public.js"></script>
    <!--公共css-->
    <link rel="stylesheet" href="../css/pubic.css">
    <!--本页面css-->
    <link rel="stylesheet" href="../css/index.css">
</head>
<body style="background: #f6f6f6">
<div class="mySinCir-box">
    <ul class="heFr-box-tab">
        <li class="li-50 li-active">男生</li>
        <li class="li-50">女生</li>
    </ul>
    <div class="heFr-box-deta">
        <ul class="myS-box-list">
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <div class="list-detail-left">
                            <p>小月月1</p>
                            <span>世界这么大，我想去看看</span>
                        </div>
                        <i class="list-detail-right"></i>
                    </div>


                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <div class="list-detail-left">
                            <p>小月月1</p>
                            <span>世界这么大，我想去看看</span>
                        </div>
                        <i class="list-detail-right"></i>
                    </div>


                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <div class="list-detail-left">
                            <p>小月月1</p>
                            <span>世界这么大，我想去看看</span>
                        </div>
                        <i class="list-detail-right"></i>
                    </div>


                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <div class="list-detail-left">
                            <p>小月月1</p>
                            <span>世界这么大，我想去看看</span>
                        </div>
                        <i class="list-detail-right"></i>
                    </div>


                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <div class="list-detail-left">
                            <p>小月月1</p>
                            <span>世界这么大，我想去看看</span>
                        </div>
                        <i class="list-detail-right"></i>
                    </div>


                </a>
            </li>
        </ul>
        <ul class="myS-box-list" style="display: none;">
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <div class="list-detail-left">
                            <p>小月月2</p>
                            <span>世界这么大，我要去看看</span>
                        </div>
                        <i class="list-detail-right"></i>
                    </div>


                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <div class="list-detail-left">
                            <p>小月月2</p>
                            <span>世界这么大，我要去看看</span>
                        </div>
                        <i class="list-detail-right"></i>
                    </div>


                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <div class="list-detail-left">
                            <p>小月月2</p>
                            <span>世界这么大，我要去看看</span>
                        </div>
                        <i class="list-detail-right"></i>
                    </div>


                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <div class="list-detail-left">
                            <p>小月月2</p>
                            <span>世界这么大，我要去看看</span>
                        </div>
                        <i class="list-detail-right"></i>
                    </div>


                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <div class="list-detail-left">
                            <p>小月月2</p>
                            <span>世界这么大，我要去看看</span>
                        </div>
                        <i class="list-detail-right"></i>
                    </div>


                </a>
            </li>
        </ul>
    </div>
</div>

<!--jquery.js-->
<script src="../js/jquery-3.0.0.min.js"></script>
<!--引入handlebars渲染模板-->
<script src="../js/handlebars-v4.0.10.js"></script>
<!--接口配置文件-->
<script src="../js/config.js"></script>
<!--引入本页面js-->
<script src="../js/index.js"></script>
<script>
    var tab=$('.heFr-box-tab li');
    tab.on('click',function () {
        var index = $(this).index();
        $(this).addClass('li-active').siblings().removeClass('li-active');
        $(this).parents('.heFr-box').find('.heFr-box-deta ul').eq(index).show().siblings().hide()
    })
</script>
</body>
</html>